<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="UTF-8"%>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/template/common/js/jquery.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/template/common/js/jquery.cycle.js"></script>
<style type="text/css">
	
div.cycle
{
	margin:0px auto;
	height:210px;
	overflow:hidden;
	z-index:-1;
}
div.cycle_nav
{	display: inline;
	width:110px;
	hegiht:18px;
	float:left;
	margin:-30px 0px 0px 865px;
	position:absolute;
	z-index:1;
}
div.cycle_nav a
{
	color:#36f;
	font:700 11px "Arial";
	background:url(images/ibbtn.gif) no-repeat;
	float:left;
	width:18px;
	height:18px;
	line-height:18px;
	text-align:center;
	text-decoration:none;
	margin-left:5px;
}
div.cycle_nav a.activeSlide
{	
	color:#fff;
	background:url(images/ibhbtn.gif) no-repeat;
}
div.cycle_nav a:hover
{	
	color:#fff;
	background:url(images/ibhbtn.gif) no-repeat;
}
</style>
<body>

<div style="width: 400px;height: 600px;margin:auto;margin-top: 300px;">
<div id="banner" class="cycle">
    	<img width src="images/ibanner1.jpg" />
        <img  src="images/ibanner2.jpg" />
        <img  src="images/ibanner3.jpg" />
        <img  src="images/ibanner4.jpg" />
</div>
<div id="btn"  class="cycle_nav"></div>
</div>
<script type="text/javascript">
	$(function(){
	try
	{
		$('#banner').cycle({ 
				fx:'scrollLeft',
				pager:'#btn'
		});
	}
	catch(e)
	{
	alert(e);
	}
	})
</script>
</body>
</html>